<template>
  <div>
    <TabsView />
    <h1>业主信息管理</h1>
    <el-button
      type="primary"
      plain
      @click="(dialogFormVisible = true), (flag = 0)"
      class="xdj"
      >添加</el-button
    >
    <el-table
      :data="
        tableData
          ? tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          : []
      "
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column label="房屋Id" prop="id" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.id }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="房屋编号"
        prop="houseNum"
        align="center"
        width="130px"
      >
      </el-table-column>
      <el-table-column label="业主姓名" prop="ownName" width="100px">
      </el-table-column>
      <el-table-column
        label="注册时间"
        prop="createTime"
        align="center"
        width="200px"
      >
      </el-table-column>
      <el-table-column
        label="联系方式"
        prop="ownPhone"
        align="center"
        width="160px"
      >
      </el-table-column>
      <el-table-column
        label="车牌号"
        prop="carNum"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column label="电费余额" align="center" prop="totalEleFee">
      </el-table-column>
      <el-table-column
        label="停车费余额"
        prop="totalParkFee"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        label="物业费余额"
        prop="totalParkFee"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column label="水费余额" align="center" prop="totalWaterFee">
      </el-table-column>

      <el-table-column align="right" width="260px">
        <template slot="header" slot-scope="{}">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @change="handleClick()"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            type="success"
            plain
            class="xd"
            size="small"
            @click="xiugai(scope.row, (flag = 1))"
            >修改</el-button
          >
          <el-button
            type="danger"
            plain
            class="xd"
            @click="Delete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击添加和修改的弹框 -->
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="房屋id" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.id" autocomplete="off" class="srkw">{{
            form.id
          }}</el-input> -->
          <el-select v-model="form.houseId" placeholder="请选择房屋id">
            <el-option
              :label="v"
              :value="v"
              v-for="v in homeId"
              :key="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋楼栋" :label-width="formLabelWidth">
          <el-select v-model="form.houseNum" placeholder="请选择房屋楼栋">
            <el-option
              :label="v.houseNum"
              :value="v.id"
              v-for="v in house"
              :key="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业主姓名" :label-width="formLabelWidth">
          <el-input v-model="form.ownName" autocomplete="off" class="srkw">{{
            form.ownName
          }}</el-input>
        </el-form-item>
        <el-form-item label="注册时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.createTime"
              class="srkw"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input
            v-model="form.ownPhone"
            autocomplete="off"
            class="srkw"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input
            v-model="form.carNum"
            autocomplete="off"
            class="srkw"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addfunyz()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 8, 12, 16]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  yzxx,
  addyz,
  chazhao,
  deleteyz,
  update,
  gethouse,
} from "../../apis/wyn/link.js";
import TabsView from "../pm/TabsView.vue";

export default {
  components: { TabsView },
  mounted() {
    this.chexkout();
    gethouse().then((ok) => {
      // console.log(ok);
      // console.log(ok.data.data);
      this.house = ok.data.data;
      ok.data.data.forEach((item) => {
        this.homeId.push(item.id);
      });
      console.log(this.homeId, 1111222);
    });
  },
  data() {
    return {
      tableData: [],
      house: "",
      arr: "",
      input: "",
      // 默认显示第几页
      currentPage: 1,
      pagesize: 8,
      search: "",
      homeId: [],
      flag: 1,
      dialogTableVisible: false,
      // xiugai: '',
      dialogFormVisible: false,
      list: [],
      code: "",
      form: {
        id: "",
        houseNum: "",
        ownName: "",
        houseId: "",
        createTime: "",
        ownPhone: "",
        carNum: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },

  // 删除的弹框的函数
  methods: {
    // 每页显示的条数
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },

    // 查找业主的所有信息（封装）
    chexkout() {
      yzxx().then((ok) => {
        // console.log(ok);
        this.tableData = ok.data.data;
        this.list = ok.data.data;
      });
    },
    // 查找业主信息
    handleClick() {
      console.log(this.search);
      chazhao(this.search).then((ok) => {
        if (ok.data.code == 200) {
          this.$message({
            type: "success",
            message: "查找成功!",
          });
          // 弹出框
        } else if (ok.data.code == 515) {
          this.$message({
            type: "warning",
            message: "Sorry未查询到!",
          });
        }
        console.log(ok, 13232);
        this.tableData = ok.data.data;
        // 清空输入框的我问题
        this.search = "";
      });
    },
    //修改事件
    xiugai(row) {
      console.log(row);
      this.flag = 1;
      this.form.id = row.id;
      this.form.houseNum = row.houseNum;
      this.form.ownName = row.ownName;
      this.form.createTime = row.createTime;
      this.form.ownPhone = row.ownPhone;
      this.form.carNum = row.carNum;
      this.dialogFormVisible = true;
    },
    //删除事件
    Delete(i) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteyz(i).then((res) => {
            console.log(res, 555);
            console.log(res.data.code);
            this.chexkout();
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 弹出框
            } else if (res.data.code == 201) {
              this.$message({
                type: "warning",
                message: "有未完成的订单!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加事件
    addfunyz() {
      if (this.flag === 0) {
        console.log(this.form.carNum, "268");
        console.log(this.form.houseId, "1111");
        addyz(
          this.form.id,
          this.form.carNum,
          this.form.houseId,
          this.form.ownName,
          this.form.ownPhone,
          this.form.parkId
        ).then((ok) => {
          console.log(ok);
          console.log(typeof this.form.ownPhone);
          console.log(typeof this.form.carNum);
          if (ok.data.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            // 弹出框
          } else if (ok.data.code == 515) {
            this.$message({
              type: "warning",
              message: "电话或车牌号输入有误!",
            });
          }
          this.chexkout();
        });
        this.dialogFormVisible = false;
      } else {
        // 修改的请求
        update(
          this.form.id,
          this.form.carNum,
          this.form.houseId,
          this.form.ownName,
          this.form.ownPhone,
          this.form.parkId
        ).then((ok) => {
          console.log(ok);
          if (ok.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            // 弹出框
          } else if (ok.data.code == 515) {
            this.$message({
              type: "warning",
              message: "房屋id不能为空或电话车牌号等输入有误!",
            });
          } else if (ok.data.code == 201) {
            this.$message({
              type: "warning",
              message: "业主有未完成订单或电话号车牌号等已存在!",
            });
          }
          console.log(ok.data, 111111);
          this.chexkout();
          this.dialogFormVisible = false;
        });
      }
    },
  },
};
</script>
<style scoped>
h1 {
  font-size: 30px;
  color: rgb(139, 231, 183);
  margin: 10px 0 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.xd {
  width: 60px;
  height: 35px;
  font-size: 10px;
  margin: 0 5px;
}
.xdj {
  width: 80px;
  height: 39px;
  margin: 0 0 8px;
}
.srkw {
  width: 400px;
  height: 20px;
}
/* .ys{
  width: 200px;
} */
</style>